<template>
  <!--顶部-->

  <!--顶部卡片  -->
  <n-card >
   <div style="align-content: center ;display: flex">
    <div style="display: inline-block ;float: left ;padding-left: 27px " >
      <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN">
        学历:
      <n-space vertical style="width: 300px ;display: inline-block ;padding-top: 10px">
         <n-select v-model:value="XueLiValue" :options="XueLi" />
      </n-space>
      </n-config-provider>
    </div>

    <div  style="  display: inline-block ;margin-left: 40px ;float: left" >
      <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN">
       出生日期:
      <n-space style="display: inline-block;padding-top: 10px ;width: 300px">
        <n-date-picker
            v-model:value="range"
            update-value-on-close
            type="daterange"
            :actions="null"
            clearable
        />
      </n-space>
      </n-config-provider>
    </div>
     <div style="display: inline-block ;float: left ;margin-left: 40px">
       <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN" :show="show">
        薪资范围:
       <n-space vertical style="width: 300px ;display: inline-block ;padding-top: 10px">
         <n-select v-model:value="XiZiValue" :options="XiZi"/>
       </n-space>
       </n-config-provider>
     </div>
   </div>
    <div style="display: inline-block ;float: left ;margin-top: 5px">
      <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN" :show="show">
       工作经验:
      <n-space vertical style="width: 300px ;display: inline-block ;padding-top: 10px">
        <n-select v-model:value="WorkValue" :options="Work" />
      </n-space>
      </n-config-provider>
    </div>
    <div style="display: inline-block ;float: left ;margin-left: 50%;margin-top: 1%">
    <n-button
        style="width: 64px;"
        @click="refresh"
    >

      重置
    </n-button>
    &nbsp;
    <n-button
        style="width: 64px;"
        type="info"
        @click="OnSearch"
    >
    查询
    </n-button>
    <n-button
        style="width: 64px;margin-left: 5px ;color: #1890FF"
        :bordered="false"
        @click="show"
    >
     收起
    </n-button>
    </div>
</n-card>

  <!--  卡片区域  -->
  <n-card class="one" >
    <!--    工具栏    -->
    <n-space justify="end" style="padding-bottom: 15px;">
      <!--刷新-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button text style="font-size: 20px; width:22px; height:32px;" @click="refresh">
            <n-icon>
              <refresh-sharp />
            </n-icon>
          </n-button>
        </template>
        <span>刷新</span>
      </n-tooltip>
      <!--密度-->
      <n-popselect v-model:value="densityValue" :options="densityOptions" trigger="click">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button text style="font-size: 20px; width:22px; height:32px; margin-left: 11px">
              <n-icon>
                <auto-fit-height20-regular/>
              </n-icon>
            </n-button>
          </template>
          <span>密度</span>
        </n-tooltip>
      </n-popselect>
        <!--列设置-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-popover trigger="click" placement="bottom-end">
            <template #trigger>
              <n-button text style="font-size: 20px; width: 22px; height: 32px; margin-bottom: 2px; margin-left: 11px">
                <n-icon>
                  <Settings20Regular />
                </n-icon>
              </n-button>
            </template>
            <template #header>
              <n-checkbox label="列设置" v-model:checked="allChecked" @update:checked="allChange" />
            </template>
            <n-space vertical>
              <n-checkbox v-for="item in checkboxList" :key="item.name" :label="item.name" v-model:checked="item.checked" @update:checked="itemChange" />
            </n-space>
          </n-popover>
        </template>
        <span>列设置</span>
      </n-tooltip>
    </n-space>
      <!--    数据表格    -->
    <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
        :size="densityValue"
        :loading="loading"
        scroll-x="1000"
        :show-arrow="false"
    />
  </n-card>
</template>
<script>


import {defineComponent,ref,reactive,h} from "vue";
import {AutoFitHeight20Regular, Settings20Regular} from "@vicons/fluent";
import {RefreshSharp} from "@vicons/material";
import {Add} from "@vicons/ionicons5";
import {NButton, NFlex, NIcon, NImage, NTag} from "naive-ui";
import {DeleteUser, GetUserList} from "@/api/account";
import {LeftOutlined, RightOutlined} from "@vicons/antd";
import {deleteApply, ListApply, ThreadApply} from "@/api/apply";
import {GetBossList} from "@/api/boss";
import { zhCN,dateZhCN } from 'naive-ui'

export default defineComponent({
  components: {Add, RefreshSharp, Settings20Regular, AutoFitHeight20Regular},
  setup() {
    const message = window.$message
    const dialog = window.$dialog
    // 加载
    const loading = ref(false)
    //s
    /*  数据表格  */
    // 创建表格列模版
    const createColumns = () => {
      return [
        {
          title: "序号",
          key: "index",
          render(row, index) {
            return index + 1;
          }
        },
        {
          title: "用户名",
          key: "name",
        },
        {
          title: "职位",
          key: "job"
        },
        {
          title: "类型",
          key: "type",
          render(row) {
            switch (row.type) {
              case 0:
                return h(
                    NTag,
                    {
                      strong: true,
                      size: "small",
                      type: "success",
                    },
                    {default: () => "投递简历"}
                )
              case 1:
                return h(
                    NFlex,
                    {
                      wrap: false,
                      size: "small",
                    },
                    {
                      default: () => [
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "success",
                            },
                            {default: () => "投递简历"}
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            {default: () => "已沟通"}
                        )
                      ]
                    }
                )
              default:
                break;

            }
          }

        },
        {
          title: "最终结果",
          key: "result",
          render(row) {
            switch (row.result) {
              case 1:
                return h(
                    NTag,
                    {
                      strong: true,
                      size: "small",
                      type: "success",

                    },
                    {default: () => "通过"}
                )
              case 0:
                return h(
                    NTag,
                    {
                      strong: true,
                      size: "small",
                      type: "info",
                    },
                    {default: () => "待定"}
                )
              case 2:
                return h(
                    NTag,
                    {
                      strong: true,
                      size: "small",
                      type: "error",
                    },
                    {default: () => "未通过"}
                )
            }
          }
        },
        {
          title: "备注",
          key: "remarks",
          ellipsis: {
            tooltip: {
              width: 200,
            }
          }
        },
        {
          title: "投递时间",
          key: "time",
          width: 200
        },
        {
          title: "操作",
          key: "actions",
          render(row) {
            return h(
                NFlex,
                {
                  size: "small",
                },
                {
                  default: () => [
                    h(
                        NButton,
                        {
                          text: true,
                          color: "#3FA2FE",
                          onClick: () => {
                            dialog.warning({
                              title: '删除记录',
                              content: '确定删除该记录吗？',
                              positiveText: '确定',
                              negativeText: '取消',
                              maskClosable: false,
                              onNegativeClick: () => {
                                message.success('取消删除')
                              },
                              onPositiveClick: () => {
                                message.success('确定删除')
                              ListApply().then(i => {
                                  const content = i.data.list
                                  console.log(row)
                                  content.forEach((item) => {
                                    if (item.user.username === row.name||'-'===row.name){
                                      row.id = item.id
                                      deleteApply(row.id).then(res => {
                                        console.log(row.id)
                                        console.log(res)
                                        if (res.code === 0) {
                                          message.success(res.message)
                                          // 更新数据
                                          window.location.reload()
                                        } else {
                                          message.error(res.message)
                                        }
                                      })
                                    }
                                  })
                                })
                              }
                            })


                          }
                        },
                        {default: () => "删除"}
                    ),
                  ]
                }
            )
          }
        }
      ]
    };
    // 调用列模版
    const columns = createColumns()

    // 表格数据
    // let data = reactive([])
    let data = ref([])
    // 总条数
    const total = ref(0);
    // 总页数
    const totalPage = ref(0);
    // 当前页
    const page = ref(0);
    // 当前获取数据最后一页
    //  const lastPage = ref(1);
    //分页设置
    const pagination = {
      prev: () => {
        return h(
            NIcon,
            {
              onClick: () => {
                if (page.value > 1) {
                  page.value--
                }
              }
            },
            {
              default: () => h(LeftOutlined)
            }
        )
      },
      next: () => {
        return h(
            NIcon,
            {
              onClick: () => {
                if (page.value < totalPage.value) {
                  page.value++
                }
              }
            },
            {
              default: () => h(RightOutlined)
            }
        )
      },
      prefix: () => {
        const range = [page.value * 10 - 9, page.value * 10];
        if (page.value === 0) {
          return `第 0 - 0 条 / 总共 ${total.value} 条`
        } else if (page.value === 1 && totalPage.value !== 1) {
          return `第 1 - ${range[1]} 条 / 总共 ${total.value} 条`;
        } else if (page.value === totalPage.value) {
          return `第 ${range[0]} - ${data.length} 条 / 总共 ${total.value} 条`;
        } else if (page.value > 1 && page.value < totalPage.value) {
          return `第 ${range[0]} - ${range[1]} 条 / 总共 ${total.value} 条`;
        }
      },
    }



    //学历选择
    const XueLi = ref([
      {label: "高中以下", value: "0"},
      {label: "高中", value: "1"},
      {label: "中专/技校", value: "2"},
      {label: "大专", value: "3"},
      {label: "本科", value: "4"},
      {label: "硕士", value: "5"},
      {label: "博士", value: "6"},
    ])
    let XueLiValue = ref(null)
    //薪资选择
    const XiZi = ref([
      {
        label: '面议',
        value: 0,
      },
      {
        label: '1-3K',
        value: 1,
      },
      {
        label: '3-5K',
        value: 2,
      },
      {
        label: '5-8K',
        value: 3,
      },
      {
        label: '8-12K',
        value: 4,
      },
      {
        label: '12-15K',
        value: 5,
      },
      {
        label: '15-20K',
        value: 6,
      },
      {
        label: '20K以上',
        value: 7,
      },
    ])
    let XiZiValue = ref(null)
    //工作经验
    const Work = ref([
      {
        label: '不限',
        value: 0,
      },
      {
        label: '1年以内',
        value: 1,
      },
      {
        label: '1-3年',
        value: 2,
      },
      {
        label: '3-5年',
        value: 3,
      },
      {
        label: '5-10年',
        value: 4,
      },
      {
        label: '10年以上',
        value: 5,
      },
    ])
    let WorkValue = ref(null)
    // 生日
    let range = ref(null)


    function TimestampToDate(Timestamp) {
      let date1 = new Date(Timestamp);
      return date1.toLocaleDateString().replace(/\//g, "-");
    }


    /*获取表格数据*/
    let getData = () => {
      let per_page = ref(100)

      const param = {
        page: page.value,
        per_page: per_page.value,

        'filter[user.resume.education]': XueLiValue.value,
        'filter[user.resume.experience]': WorkValue.value,
        'filter[user.resume.salary]' :XiZiValue.value,
        // 'filter[user.resume.birthday_between]':TimestampToDate(range.value[0]) + ',' + TimestampToDate(range.value[1])

      }
      if (range.value) {
        param['filter[user.resume.birthday_between]'] = TimestampToDate(range.value[0]) + ',' + TimestampToDate(range.value[1])
      }

      loading.value = true
      ListApply(param).then(res => {
        const content = res.data.list
        console.log(content)
        let getDate = (time) => {
          const dateTime = new Date(time)
          const year = dateTime.getFullYear()
          let month = (dateTime.getMonth() + 1)
          month = month >= 10 ? month : `0${month}`
          let date = dateTime.getDate()
          date = date >= 10 ? date : `0${date}`
          let hour = dateTime.getHours()
          hour = hour >= 10 ? hour : `0${hour}`
          let minute = dateTime.getMinutes()
          minute = minute >= 10 ? minute : `0${minute}`
          let second = dateTime.getSeconds()
          second = second >= 10 ? second : `0${second}`
          return `${year}-${month}-${date} ${hour}:${minute}:${second}`
        }

        content.forEach((item, index) => {
          data.value.push({
            key: index,
            id: item.id,

            name: item.user ? item.user.username : '-',
            remarks: item.comment ? item.comment : '-',
            time: getDate(item.created_at),
            result: item.result,
            type: item.type,
            job: item.job ? (item.job.position ? item.job.position.name : '-') : '-'
          })
        })



        total.value = res.meta.total
        totalPage.value = Math.ceil(data.length / 10)
        page.value = 1

        loading.value = false
      })
    }
    //调用函数
    getData()



    // 查询
    const OnSearch = ()=>{
      data.value = []
      page.value = 1

      getData()
    }




    /*刷新*/

    // 刷新
    function refresh() {
      window.location.reload()
    }

    /*密度*/
    // 密度事件数据
    const densityOptions = [
      {
        label: "默认",
        value: "large",
      },
      {
        label: "中等",
        value: "medium"
      },
      {
        label: "紧密",
        value: "small",
      },
    ]
    // 默认密度
    const densityValue = ref('medium')

    /*列设置*/
    // 复选框全选
    const allChecked = ref(true)
    // 复选框列表
    const checkboxList = ref([])
    // 列表添加数据
    for (let i = 0; i < columns.length; i++) {
      checkboxList.value.push({name: columns[i].title, checked: true})
    }
    // 全选改变事件
    const allChange = () => {
      if (allChecked.value) {
        checkboxList.value.forEach(item => {
          item.checked = true
        })
      } else {
        checkboxList.value.forEach(item => {
          item.checked = false
        })
      }
    }
    // 复选框单个改变事件
    const itemChange = () => {

    }

    return {
      h,
      data,
      columns,
      pagination,
      loading,
      densityValue,
      page,
      // lastPage,
      allChange,
      itemChange,
      refresh,
      densityOptions,
      checkboxList,
      allChecked,
      message,
      dialog,


      range,
      // range1,
      Work,
      XiZi,
      XueLi,
      zhCN,
      dateZhCN,
      show: ref(false),


      XueLiValue,
      XiZiValue,
      WorkValue,
      OnSearch

    }
  }

  })
</script>
<style>
.one{
  margin-top: 18px;
}

</style>
